<template>
	<div class="containerring" id="circle" :style="{'background': color,'width':handleSize,'height':handleSize}">
		<div class="leftring">
			<div class="left"
				:style="{'background': ringtrackcolor,'border-radius':handRadius('l'), 'transform':`${renderLeft()}`}">
			</div>
		</div>
		<div class="rightring">
			<div class="right"
				:style="{'background': ringtrackcolor,'border-radius':handRadius('r'),'transform':`${renderRight()}`}">
			</div>
		</div>
		<div class="proportion" :style="{'width':mw,'height':mw}">
			<view class="name">{{typename}}</view>
			<view class="baifenbi">{{typeValue ? typeValue : rotate+'%'}}</view>
			<view class="yu">{{danwei}}</view>
		</div>
	</div>
</template>
<script>
	export default {
		name: "lj-chart",
		props: {
      typeValue: {
        type: String | Number,
        default: 0
      },
			color: { //环状图颜色
				type: String,
				default: '#ccc'
			},
			diameter: { //进度条宽度
				type: Number,
				default: 40
			},
			ringtrackcolor: { //环状图轨道颜色
				type: String,
				default: '#53A4FE'
			},
			typename: { //名称
				type: String,
				default: ''
			},
			danwei: { //名称
				type: String,
				default: ''
			},
			rotate: {
				type: String | Number,
				default: 19
			},
			size: { //容器大小
				type: Number,
				default: 200
			},
		},

		data() {
			return {
				getBoxW: null
			};
		},
		computed: {
			mw() {
				const makeW = `${this.getBoxW?.width - this.diameter}px`
				return makeW
			},
			handleSize() {
				const hSize = `${this.size}px`
				return hSize
			},

		},
		methods: {
			async init() {
				this.getBoxW = await this.getBox()
				console.log(this.getBoxW)
			},
			async getBox() {
				let obj = null
				return new Promise(resolve => {
					const query = uni.createSelectorQuery().in(this);
					query.select(`#circle`).boundingClientRect(data => {
						obj = data
					}).exec(() => {
						resolve(obj);
					});
				})
			},
			handRadius(type) {
				let htm = ``
				const bSize = `${this.size/2}px`
				if (type == 'l') {
					htm = `${bSize} 0 0 ${bSize}`
				} else {
					htm = `0 ${bSize} ${bSize} 0`
				}
				return htm
			},
			renderLeft() {
				let rotateNum = this.rotate * 3.6;
				console.log(rotateNum)
				if (rotateNum <= 180) {
					return `rotate(${0}deg)`
				} else {
					return `rotate(${(rotateNum-180)}deg)`
				}
			},
			renderRight() {
				let rotateNum = this.rotate * 3.6;
				if (rotateNum <= 180) {
					return `rotate(${rotateNum}deg)`
				} else {
					return `rotate(${180}deg)`
				}

			},
		},
		mounted() {
			this.init()
		}
	}
</script>

<style lang="scss">
	.containerring {
		width: 110px;
		height: 110px;
		position: relative;
		border-radius: 50%;

		.leftring {
			width: 50.6%;
			height: 100%;
			margin: 0px;
			position: absolute;
			left: -0.4%;
			top: 0;
			overflow: hidden;
		}

		.rightring {
			width: 50.6%;
			height: 100%;
			margin: 0px;
			position: absolute;
			right: -0.4%;
			top: 0;
			overflow: hidden;
		}

		.left {
			width: 100%;
			height: 100%;
			border-radius: 55px 0 0 55px;
			// background: #EBEEF5;
			transform-origin: right center;
		}

		.right {
			width: 100%;
			height: 100%;
			border-radius: 0 55px 55px 0;
			// background: #EBEEF5;
			transform-origin: left center;
		}

		.proportion {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background: #0277ff;
      color: #fff;
			border-radius: 50%;
			font-size: 20px;
			padding: 10px;
			box-sizing: border-box;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			.name{
				font-size: 30rpx;
				margin-bottom: 10rpx;
			}
			.baifenbi{
				font-size: 40rpx;
				margin-bottom: 10rpx;
			}
			.yu{
				font-size: 24rpx;
			}
		}
	}
</style>